<template>
	<!-- 修改密码、资金密码 -->
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model+' '+(model=='light'?'p-stickyLight':'')">
			<view class="status_bar">
		
			</view>
			<view class="nav_bar flex align-center justify-between">
				<view @click="$tool.goBack()" class="f0 p-3">
					<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
				</view>
				<view class="A-Medium" :class="'navTitle_'+model">
					{{type==1?i18n.l042:i18n.l043}}
				</view>
				<view class="f0 p-3 opacity0">
					<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
				</view>
			</view>
		</view>
		<view class="pt-3">
			
		</view>
		<view class="formWrap px-5 A-Regular">
			<!-- 新密码 -->
			<view class="formTitle">
				{{type==1?i18n.l030:i18n.l044}}
			</view>
			<view class="inputWrap px-3 flex align-center" :class="model=='light'?'inputWrapLight':''">
				<input :type="showPass?'text':'password'" v-model="password" :placeholder="type==1?i18n.l031:i18n.l045"
					class="flex-1 inputText A-Medium" :class="model=='light'?'inputTextLight':''"
					:placeholder-class="'placeholderClass A-Medium',model=='light'?'placeholderClassLight':''">
				<view @click="showPass=!showPass" class="f0 pl-3">
					<image v-if="showPass" class="img2" :src="'/static/images/hiddenPass_'+model+'.png'" mode="">
					</image>
					<image v-else class="img2" :src="'/static/images/showPass_'+model+'.png'" mode=""></image>
				</view>
			</view>
			<!-- 确认新密码 -->
			<view class="formTitle">
				{{i18n.l032}}
			</view>
			<view class="inputWrap px-3 flex align-center" :class="model=='light'?'inputWrapLight':''">
				<input :type="showPass2?'text':'password'" v-model="password2" :placeholder="i18n.l033"
					class="flex-1 inputText A-Medium" :class="model=='light'?'inputTextLight':''"
					:placeholder-class="'placeholderClass A-Medium',model=='light'?'placeholderClassLight':''">
				<view @click="showPass2=!showPass2" class="f0 pl-3">
					<image v-if="showPass2" class="img2" :src="'/static/images/hiddenPass_'+model+'.png'" mode="">
					</image>
					<image v-else class="img2" :src="'/static/images/showPass_'+model+'.png'" mode=""></image>
				</view>
			</view>
			<view class="passDesc">
				<image :src="'/static/images/desc_'+model+'.png'" mode=""></image>
				{{type==1?i18n.l023:i18n.l046}}
			</view>
		</view>
		<!-- 提交按钮 -->
		<view @click="submit" class="btn mx-auto A-Medium mt-8 clickCss">
			{{i18n.l035}}
		</view>
	</view>
</template>

<script>
	import {
		changePassword,
		setCapitalPassword
	} from '@/core/api/user.js';
	export default {
		data(){
			return{
				type:1,//1登录密码 2资金密码
				// verifyType:1,//1手机号 2邮箱
				showPass: false, //是否显示密码
				showPass2: false, //是否显示密码
				password: '', //密码
				password2: '', //密码
			}
		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		onShow() {
			this.$tool.setStatusBarStyle(this.model);
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			const currentWebview = page.$getAppWebview();
			if(this.model == "dark"){
				currentWebview.setStyle({
					background: "#0E0F11"
				});
			}else{
				currentWebview.setStyle({
					background: "#ffffff"
				});
			}
		},
		computed: {
			i18n() {
				return this.$t('login');
			},
			i18n2() {
				return this.$t('showToast');
			},
			model() {
				return this.$store.state.config.model;
			}
		},
		onLoad(options) {
			let obj = this.$tool.changeOptions(options.obj);
			this.type = obj.type;
			// this.verifyType = obj.verifyType;
		},
		methods:{
			submit(){
				let data = {
					mobileUserId:uni.getStorageSync('mobileUserId')
				}
				if (this.password === '') {
					this.$tool.showToast(this.i18n2.st004);
					return;
				}
				if (this.password2 === '') {
					this.$tool.showToast(this.i18n2.st011);
					return;
				}
				if (this.password !== this.password2) {
					this.$tool.showToast(this.i18n2.st012);
					return;
				}
				if(this.type==1){
					data.password = this.password;
					this.$tool.showLoading();
					changePassword(data).then(res => {
						uni.hideLoading();
						this.$tool.showToast(this.i18n2.st013);
						setTimeout(res=>{
							this.$tool.goBack();
						},800)
					}).catch(err => {
						uni.hideLoading();
					})
				} else if(this.type==2){
					data.capitalPassword = this.password;
					this.$tool.showLoading();
					setCapitalPassword(data).then(res => {
						uni.hideLoading();
						this.$store.dispatch('config/getCustomerInfo');
						this.$tool.showToast(this.i18n2.st013);
						setTimeout(res=>{
							this.$tool.goBack();
						},800)
					}).catch(err => {
						uni.hideLoading();
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.p-stickyLight {
		background: #fff;
	}
	.formWrap {
		.formTitle {
			font-size: 28rpx;
			color: #7F838D;
			margin-bottom: 22rpx;
		}
	
		.inputWrap {
			width: 650rpx;
			height: 88rpx;
			background: #16181C;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			margin-bottom: 35rpx;
	
			.area {
				font-size: 28rpx;
				color: #AAACB8;
			}
	
			.areaLight {
				color: #7F838D;
			}
			
			.inputText {
				font-size: 28rpx;
				color: #F7F7F7;
				// text-align: right;
			}
			
			.inputTextLight {
				color: #0E0F11;
			}
			
			.placeholderClass {
				font-size: 28rpx;
				color: #7F838D;
			}
	
			.placeholderClassLight {
				color: #B5B7BF;
			}
	
			.img1 {
				width: 15rpx;
				height: 11rpx;
				margin-left: 16rpx;
				margin-right: 42rpx;
			}
	
			.img2 {
				width: 40rpx;
				height: 40rpx;
			}
	
			.codeText {
				font-size: 28rpx;
				color: #5951BA;
			}
		}
	
		.inputWrapLight {
			background: #FFFFFF;
		}
		.passDesc {
			image {
				width: 28rpx;
				height: 28rpx;
				vertical-align: bottom;
				margin-right: 7rpx;
			}
		
			line-height: 28rpx;
			font-size: 24rpx;
			color: #5951BA;
		}
	}
	
	.btn {
		width: 650rpx;
		height: 80rpx;
		background: #5951BA;
		border-radius: 74rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #F7F7F7;
	}
</style>